<template>
  <div class="gank_index">
    <header>
      <div class="logo">
        <img src="../images/gank_logo.png" alt />
      </div>
      <div class="search">
        <form action="#">
          <AutoComplete
            v-model="value"
            :data="search_data"
            placeholder="搜索好了！真不骗你！"
            :transfer="true"
            icon="ios-search"
            @on-search="search_change"
            @on-select="selected(value)"
            @keyup.enter.native="jump()"
            size="large"
          ></AutoComplete>
        </form>
      </div>
    </header>
    <Tabs value="name0" :animated="false" class="tabs" @on-click="reload()">
      <TabPane
        v-for="(item,index) in index_data.category"
        :key="index"
        :label="item"
        :name="'name'+index"
      >
        <v-card v-for="(item2,index2) in index_data.results[item]" :key="index2" :crad_data="item2"></v-card>
      </TabPane>
    </Tabs>
    <v-footer-nav></v-footer-nav>
    <v-back-top></v-back-top>
    <v-load v-show="load_flag"></v-load>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from "vuex";
const vCard = () => import("../components/card.vue");
const VFooterNav = () => import("../components/footer_nav.vue");
const vBackTop = () => import("../components/backTop.vue");
const vLoad = () => import("../components/load.vue");
export default {
  components: {
    vCard,
    vBackTop,
    VFooterNav,
    vLoad
  },
  data() {
    return {
      range: "all",
      count: 3,
      page: 1,
      value: ""
    };
  },
  computed: {
    ...mapState("index", ["index_data"]),
    ...mapState("search", ["search_data", "search_flag"]),
    ...mapState("load", ["load_flag"])
  },
  created() {
    this.$store.dispatch("index/getIndexData", {});
  },
  mounted() {
    if (window.plus) {
      this.plusReady();
    } else {
      document.addEventListener("plusready", this.plusReady, false);
    }
  },
  methods: {
    addEventTest() {
      var first = null;
      plus.key.addEventListener(
        "backbutton",
        function() {
          //首次按键，提示‘再按一次退出应用’
          if (!first) {
            first = new Date().getTime();
            console.log("再按一次退出应用"); //用自定义toast提示最好
            setTimeout(function() {
              first = null;
            }, 1000);
          } else {
            if (new Date().getTime() - first < 1000) {
              plus.runtime.quit();
            }
          }
        },
        false
      );
    },
    plusReady() {
      this.addEventTest();
    },
    selected(value) {
      var search_val = event.target.innerHTML;
      if (search_val == "" || search_val == null) {
        this.$Message.warning("搜索内容不能为空哦");
      } else {
        this.$router.push({ path: "/search", query: { keyword: search_val } });
      }
    },
    reload() {
      window.scrollTo(0, 0);
    },
    search_change() {
      this.$store.dispatch("search/getSearchData", {
        keyword: this.value,
        range: this.range,
        count: this.count,
        page: this.page
      });
    },
    jump() {
      var search_val = event.target.value;
      if (search_val == "" || search_val == null) {
        this.$Message.warning("搜索内容不能为空哦");
      } else {
        this.$router.push({ path: "/search", query: { keyword: search_val } });
      }
    }
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    if (window.plus) {
      var webview = plus.webview.currentWebview();
      plus.key.addEventListener("backbutton", function() {
        webview.canBack(function(e) {
          if (e.canBack) {
            webview.back();
          } else {
            webview.close(); //hide,quit
            //plus.runtime.quit();
          }
        });
      });
    }
    next();
  }
};
</script>
<style>
.ivu-select-item {
  white-space: normal;
}
.gank_index .ivu-tabs-nav-scrollable {
  box-sizing: border-box;
  height: 0.85rem;
  overflow-y: hidden;
}
.gank_index .ivu-tabs-nav-scroll {
  box-sizing: content-box;
  height: 0.86rem;
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.1rem;
}
.gank_index .ivu-tabs-nav-scroll ::-webkit-scrollbar {
  display: none;
}
.gank_index .ivu-tabs-nav-scroll ::-webkit-scrollbar-thumb {
  background: transparent;
}
.gank_index .ivu-tabs-nav-prev {
  display: none;
}
.gank_index .ivu-tabs-nav-next {
  display: none;
}
.gank_index .ivu-tabs-nav {
  transform: none !important;
}
.gank_index .ivu-tabs-tab {
  font-size: 0.36rem;
}
</style>

<style lang="scss" scoped>
.gank_index {
  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    background: url(../images/bg.png);
    padding: 0.1rem 0.1rem;
    overflow: hidden;
    .logo {
      float: left;
      font-size: 0;
      img {
        display: inline-block;
        width: 1.4rem;
      }
    }
    .search {
      float: right;
      width: 4rem;
      margin-top: 0.1rem;
    }
  }
  .tabs {
    padding-bottom: 1rem;
    padding-top: 1.1rem;
  }
}
</style>

